<template>
    <div >
        <el-container>
            <el-header class="home">
              <h1> <span class="el-icon-s-fold" @click="isCollapse=!isCollapse"></span> 后台管理系统</h1>
                <div>
                    <el-menu
                      
                        class="el-menu-demo"
                        mode="horizontal"
                        
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                       
                    >
                        <el-menu-item index="/index">学生管理</el-menu-item>
                        <el-menu-item index="2">设置</el-menu-item>
                        <el-menu-item index="3">其他</el-menu-item>
                    </el-menu>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px"
                    ><el-menu
                        default-active="1-4-1"
                        class="el-menu-vertical-demo"
                        :collapse="isCollapse"
                        router
                    >
                         <el-menu-item index="/xue">
                            <i class="el-icon-menu"></i>
                            <span slot="title">tap</span>
                        </el-menu-item>
                        <el-menu-item index="/tap">
                            <i class="el-icon-menu"></i>
                            <span slot="title">tap</span>
                        </el-menu-item>

                        <el-menu-item index="/hou">
                            <i class="el-icon-setting"></i>
                            <span slot="title">后台</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main><router-view></router-view></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse:true
    }
  },
};
</script>
<style lang="scss" scoped>
  .home{
    display: flex;
    justify-content: space-between;
    background: #545C64;
  }
</style>
